import router from 'umi/router';
import React, { useState } from 'react';
import { Layout, Menu, Button } from 'antd';
import {

    MenuFoldOutlined,
    MenuUnfoldOutlined,
    AppstoreOutlined,
    MailOutlined,
    SettingOutlined,
} from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
function Home(props) {
    const [collapsed, setcollapsed] = useState(false)
    const [openKeys, setOpenKeys] = React.useState(['sub1']);
    const rootSubmenuKeys = ['sub1', 'sub2', 'sub3', 'sub4', 'sub5'];
    const toggle = () => {
        setcollapsed(!collapsed)
    }
    const getItem = (label, key, icon, children, type) => {
        return {
            key,
            icon,
            children,
            label,
            type,
        };
    }
    const items = [
        getItem('用户管理', 'sub1', <MailOutlined />, [
            getItem('用户列表', '/users'),
        ]),
        getItem('权限管理', 'sub2', <AppstoreOutlined />, [
            getItem('角色列表', '/auth/roles'),
            getItem('权限列表', '/auth/rights'),
        ]),
        getItem('商品管理', 'sub3', <SettingOutlined />, [
            getItem('商品列表', '/goods/goods'),
            getItem('分类参数', '/goods/params'),
            getItem('商品分类', '/goods/categories'),
        ]),
        getItem('订单管理', 'sub4', <MailOutlined />, [
            getItem('订单列表', '/orders'),
        ]),
        getItem('数据统计', 'sub5', <MailOutlined />, [
            getItem('数据报表', '/reports'),
        ]),
    ]; // submenu keys of first level

    const onOpenChange = (keys) => {
        const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);

        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };
    const exit=()=>{
        router.push('/login')
        sessionStorage.removeItem("token")
    }
    // 左侧路由跳转
    const clickMenu=(e)=>{  //  
        router.push(e.key)
    }
    return (
        // <div>dsfsf</div>
        <Layout style={{ height: "100%" }}>
            <Sider theme='light' trigger={null} collapsible collapsed={collapsed} style={{ height: "100%" }}>
                <div className="logo" />
                <Menu
                    theme="light"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    openKeys={openKeys}
                    onOpenChange={onOpenChange}
                    items={items}
                    onClick={(e)=>clickMenu(e)}
                />
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-background header_" style={{ padding: 0,display:"flex" ,justifyContent:"space-between" 
            }}>
                    <Button
                        type="primary"
                        onClick={toggle}
                        style={{
                            margin: 10
                        }}
                    >
                        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    </Button>
                    <Button style={{marginTop:"12px"}} onClick={exit} >退出</Button>
                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                >
                    {props.children}
                </Content>
            </Layout>
        </Layout>

    )
}
export default Home